<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>
        <el-input v-model="listQuery.params.realName" placeholder="搜索用户名" style="width: 200px;" class="filter-item" />
        <el-button type="primary" icon="el-icon-download" size="small" class="filter-item" @click="handleExport">导出</el-button>
      </template>

      <template #data-columns>

        <el-table-column
          label="账号"
          prop="userName"
        />

        <el-table-column
          label="姓名"
          prop="realName"
        />

        <el-table-column
          label="已学课件"
          prop="learnFile"
          align="center"
        />

        <el-table-column
          label="总课件"
          prop="totalFile"
          align="center"
        />

        <el-table-column
          label="状态"
          align="center"
        >

          <template v-slot="scope">

            <span v-if="scope.row.state === undefined" style="color: #f0ad4e">
              未学习
            </span>
            <span v-else-if="scope.row.state === 0" style="color: #ff3333">
              学习中
            </span>
            <span v-else-if="scope.row.state === 1" style="color: #1aac1a">
              已学完
            </span>

          </template>

        </el-table-column>

        <el-table-column
          label="总学习时长/分钟"
          prop="totalMin"
          align="center"
        />

        <el-table-column
          label="明细"
          align="center"
        >

          <template v-slot="scope">
            <el-link type="primary" icon="el-icon-view" @click="showDetail(scope.row.userId)">学习明细</el-link>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="学员学习明细"
      width="80%"
      @close="dialogVisible = false"
    >

      <course-file-learn-paging :course-id="courseId" :user-id="userId" />

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import CourseFileLearnPaging from '@/views/admin/course/learn/file'
import { apiExportUserStat } from '@/api/stat/course'

export default {
  name: 'LearnStatPaging',
  components: { CourseFileLearnPaging, DataTable },
  props: {
    courseId: String
  },
  data() {
    return {

      dialogVisible: false,

      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: this.courseId,
          catId: null
        }
      },

      options: {

        // 可批量操作
        multi: false,

        // 列表请求URL
        listUrl: '/api/stat/course/user-stat-paging'
      },

      userId: ''
    }
  },

  created() {
    this.listQuery.params.courseId = this.courseId
  },

  methods: {
    showDetail(userId) {
      this.userId = userId
      this.dialogVisible = true
    },

    // 导出数据
    handleExport() {
      apiExportUserStat(this.listQuery.params)
    }
  }
}
</script>

